<template>
  <div class="upload">
    <textarea placeholder="这一刻的想法"></textarea>
    <div class="picsbox">
      <ul class="pics">
        <li v-for="(value,key) in piclist">
          <div class="img">
            <img :src="value" alt="这是图片">
          </div>
          <div class="del"><i class="iconfont"></i></div>
        </li>
        <li class="addpic">
          <label for="file"></label>
          <input type="file" id="file" class="fileinput" @change="fileChange">
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        piclist: []
      };
    },
    methods: {
      fileChange (e) {
        if (this.piclist.length === this.length) {
          alert('并没有什么改变！' + this.length + '张图片');
          return;
        }
        let file = e.target.files[0];
        if (!file) {
          return;
        }
        if (!/image/.test(file.type)) {
          alert('只能上传图片哦');
          return;
        }
        if (file.size / 1024 > this.size) {
          alert('只能上传1024以下的大小');
          return;
        }
        let $fileData = new FileReader();
        $fileData.readAsDataURL(file);
        $fileData.onload = data => {
          this.piclist.push(data.target.result);
        };
      }
    }
  };
</script>

<style lang="scss" scoped>
  .upload {
    background-color: #fff;
    padding: 15px 10px 5px;

    textarea{
      width: 100%;
      min-height:80px;
      border:none;
      outline:none;
      reszie: none;
    }
    .picsbox {
      width: 100%;

      .pics{
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        li{
          width: 25%;
          height: 90px;
          margin-right: 2.65%;
          margin-bottom: 8px;
          position: relative;
          background-color: #ccc;

          .img{
            width: 100%;
            height: 100%;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          label{
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid #eee;
            background-color: #fff;
          }
          label:before{
            content: '';
            position: absolute;
            left: 50%;
            top: 30%;
            width: 3px;
            height:45%;
            background-color: #ddd;
          }
          label:after{
            content: '';
            position: absolute;
            top: 50%;
            left: 30%;
            width: 45%;
            height: 3px;
            background-color: #ddd;
          }
          .fileinput{
            width: 100%;
            height: 100%;
            padding: 0;
            opacity: 0;
          }
        }
        li:nth-child(4n){
          margin-right: 0;
        }
      }
    }
  }
  @media only screen and (max-width:414px) {
    .upload .picsbox .pics li{
      height:90.61px;
    }
  }

  @media only screen and (max-width:375px) {
    .upload .picsbox .pics li{
      height:81.64px;
    }
  }
  @media only screen and (max-width:360px) {
    .upload .picsbox .pics li{
      height:78.19px;
    }
  }
  @media only screen and (max-width:320px) {
    .upload .picsbox .pics li{
      height:69px;
    }
  }
</style>
